<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <form-search :data-search="dataSearch">
      </form-search>

    </div>
    <div>
      <el-form size="small">
        <el-row class="mb-2">
          <el-col :span="3" :xs="4">
            名称
          </el-col>
          <el-col :span="3" :xs="4">
            键
          </el-col>
          <el-col :span="5" :xs="6">
            值类型
          </el-col>
          <el-col :span="12" :xs="8">
            内容
          </el-col>
          <!--<el-col :span="5" :xs="4">
            备注
          </el-col>-->
          <el-col :span="1" :xs="2">
          </el-col>
        </el-row>
        <template v-for="(item,index) in formData">

          <el-row class="mb-3 pb-3 border-bottom">
            <el-col :span="3" :xs="4">
              <el-form-item label="">
                <el-input v-model="item.name" :disabled="!!item.required"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3" :xs="4">
              <el-form-item label="">
                <el-input v-model="item.key" :disabled="!!item.required"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :xs="6">
              <div class="d-flex">
                <el-form-item label="" class="flex-grow-1">
                  <el-select v-model="item.type" :disabled="!!item.required">
                    <el-option label="普通值" value="normal"></el-option>
                    <el-option label="图片/文件" value="file"></el-option>
                    <el-option label="多行文本" value="textarea"></el-option>
                    <el-option label="富文本" value="textrich"></el-option>
                  </el-select>

                </el-form-item>
                <el-form-item label="">
                  <el-checkbox v-model="item.is_mult" :true-label="1" :false-label="0" :disabled="!!item.required"
                               border v-on:change="multHandleItemValue(item,index)">多值
                  </el-checkbox>

                </el-form-item>
              </div>
            </el-col>

            <el-col :span="12" :xs="8">
              <template v-if="!!item.is_mult">
                <template v-if="refreshed">
                  <el-row v-for="(value,i) in (item.value||[])" :key="i">
                    <el-col :span="20">
                      <variable-form-item :type="item.type" :value="value" v-on:change="(v)=>{item.value[i]=v}">

                      </variable-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-button size="small" class="text-danger" icon="el-icon-minus"
                                 @click="removeValue(item.value,i)"></el-button>
                    </el-col>
                  </el-row>
                </template>

                <el-button size="small" type="primary" icon="el-icon-plus" @click="addValue(item.value)">添加内容
                </el-button>
              </template>
              <template v-else>
                <variable-form-item :type="item.type" :value="item.value" :file-disk="fileDisk" v-on:change="(v)=>{item.value=v}">

                </variable-form-item>
              </template>

            </el-col>
            <!--<el-col :span="5" :xs="4">
              <el-form-item  label="" >
                <el-input v-model="item.remark" ></el-input>
              </el-form-item>
            </el-col>-->
            <el-col :span="1" :xs="2">
              <el-button v-if="!item.required" size="small" type="danger" icon="el-icon-close" @click="removeItem(index,item)"></el-button>
            </el-col>
          </el-row>
        </template>


        <el-form-item class="clearfix">
          <el-button size="mini" type="primary" native-type="button" @click="addItem">添加</el-button>
            <div class="float-end">
                <el-button type="primary" @click="save">保存</el-button>
            </div>
        </el-form-item>


      </el-form>
    </div>


    <div class="d-flex justify-content-end">
      <div class="pager" v-html="dataPager">

      </div>
    </div>

  </el-card>
</template>

<script>

import variableFormItem from './variableFormItemValueComponent'

export default {
  components: {
    variableFormItem
  },
  props: {
    dataEntities: {
      type: Array,
      default: []
    },
    dataSearch: {
      type: Object,
      default: {}
    },
    dataPager: {
      type: String,
      default: ''
    },
    apiRoutes: {
      type: Object,
      default: {}
    },
    fileDisk: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      formLabelWidth: window.formLabelWidth,
      formData: [],
      formErrors: {},
      refreshed: true,
    }
  },
  created() {
    this.formData = Object.values(this.dataEntities);

  },
  mounted() {
    let _this = this;

  },
  methods: {
    multHandleItemValue: function (item, index) {
      if (!!item.is_mult) {
        if (!LeUtils.typeIs('array', item.value)) {
          item.value = [item.value]
        }
      } else {
        if (LeUtils.typeIs('array', item.value)) {
          item.value = item.value[0]
        }
      }

    },
    addItem: function () {
      this.formData.push({
        name: '',
        type: '',
        key: '',
        value: '',
        remark: '',
      })
    },
    addValue: function (value) {
      value.push('')
    },
    removeValue: function (value, index) {
      let _this = this
      this.refreshed = false
      value.splice(index, 1)
      this.$nextTick(function (){
        _this.refreshed = true
      })
    },
    removeItem: function (index, item) {
      let _this = this;
      let id = LeUtils.valueGet(item, 'id', '')
      let apiDelete = LeUtils.valueGet(_this.apiRoutes, 'delete')
      if (id && apiDelete) {
        LeRoute.request(apiDelete, {id: id}).then(function (res_data) {
          _this.formData.splice(index, 1)
        })
      } else {
        _this.formData.splice(index, 1)
      }

    },
    save: function () {
      let _this = this;
      let apiSaveMult = LeUtils.valueGet(_this.apiRoutes, 'save_mult')

      if (apiSaveMult) {
        LeRoute.request(apiSaveMult, {variables: _this.formData}).then(function (res_data) {
          _this.$message.success('保存成功')
          window.location.reload()
        })
      }
    }
  }
}
</script>
